<form class="form-horizontal" id="add-dispensers-watchlist-form" data-toggle="validator" role="form">
    <div class="form-group" id="token-name-field">
        <!-- Token Name Field -->
    </div>
    <div class="text-right">
        <div id="btn-cancel" class="btn btn-danger margin-right-5"><i class="fa fa-lg fa-fw fa-ban"></i> Cancel</div>
        <div id="btn-submit" class="btn btn-success "><i class="fa fa-lg fa-fw fa-eye"></i> Add Watchlist</div>
    </div>
</form>


<script>
$(document).ready(function(){

    // Load any field content
    $('#token-name-field').load('html/fields/token-name-suggest.html');

    // Delay initializing some fields to give things a chance to load
    setTimeout(function(){

        // Initialize any tooltips
        $('[data-toggle="tooltip"]').tooltip({ 
            html: true,
            placement: 'bottom'
        }); 

    },100);

    // Submit form if user clicks 'Submit' button
    $('#btn-submit').click($.debounce(100,function(e){
        $('#add-dispensers-watchlist-form').submit();
    }));

    // Hide the form if users clicks 'Cancel' button
    $('#btn-cancel').click($.debounce(100,function(e){
        dialogClose('dialog-add-dispenser-watchlist');
    }));

    // Handle form validation and displaying any errors
    $('#add-dispensers-watchlist-form').validator().on('submit', function(e){
        // prevent form submission
        e.preventDefault(); 
        // Get object with form values
        var vals   = array2Object($(this).serializeArray()),
            errors = [];
        // Remove error indicators from any fields 
        $('.form-group').removeClass('has-error has-danger');
        // Verify we have a token name
        if(String(vals.name).length==0){
            errors.push('You must enter a token name to add!');
            $('#token-name').closest('.form-group').addClass('has-error has-danger');
        }
        // Limit dispenser watchlist to 10
        var cnt = FW.BASE_DISPENSERS.length;
        if(cnt>=10)
            errors.push('You can only create 10 dispenser watchlists!');
        // Display any error message
        if(errors.length){
            dialogMessage('<i class="fa fa-lg fa-fw fa-exclamation-circle"></i> Error(s)', errors.join('<br/>') );
        } else {
            var asset = vals.name,
                found = false;
            FW.BASE_DISPENSERS.forEach(function(item){
                if(item==asset)
                    found = true;
            });

            // Only add the market if it does not already exist
            if(!found){
                // Add the market to the view
                addDispenserWatchlist(asset);

                var id = String(asset).replace(/\./g,'-');

                // Set the new tab to active
                $('#dispensers-tabs a[href="#' + id + '"]').tab('show');

                // Re-adjust the tabs
                autoCollapseWatchlistTabs();

                // Add the market to the base markets array and save to disk
                FW.BASE_DISPENSERS.push(asset);
                ls.setItem('walletDispensers', JSON.stringify(FW.BASE_DISPENSERS));

                // Update the market data and view
                updateDispensersLists();

            }

            // Close the dialog box
            dialogClose('dialog-add-dispenser-watchlist');
        }
    })


});
</script>